<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>Working with on() and off() - jQuery in Action, 3rd edition</title>
      <link rel="stylesheet" href="../css/main.css"/>
   </head>
   <body>
      <button id="btn">Does nothing</button>
      <button id="btn-attach">Attach handler</button>
      <button id="btn-remove">Remove handler</button>

      <p>The output is printed on the console</p>

      <script src="../js/jquery-1.11.3.min.js"></script>
      <script>
         var $btn = $('#btn');
         var counter = 1;

         function logHandler() {
            console.log('click ' + counter);
            counter++;
         }

         $('#btn-attach').on('click', function() {
            $btn
                 .on('click', logHandler)
                 .text('Log');
         });

         $('#btn-remove').on('click', function() {
            $btn
                 .off('click', logHandler)
                 .text('Does nothing');
         });
      </script>
   </body>
</html>